<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 1000px;
				height: 1000px;
			    margin: 0 auto;
			}
			canvas{background-color: aqua;}
		</style>
	</head>
	<body>
		<div><canvas id="1" width="1000" height="1000"></canvas>
		</div>
		<script type="text/javascript">
			var bu = document.getElementById("1");
			var bi = bu.getContext("2d");

		
		    bi.arc(250, 250, 200,Math.PI,2*Math.PI);
		    
	        bi.fillStyle = "#000000";
			bi.fill();
			bi.beginPath();
			bi.arc(250, 250, 200,0,Math.PI);
		    
	        bi.fillStyle = "white";
			bi.fill();
			bi.beginPath();
			bi.arc(150, 250, 100,0,2*Math.PI);
		    
	        bi.fillStyle = "#000000";
			bi.fill();
			bi.beginPath();
			bi.arc(350, 250, 100,0,2*Math.PI);
		    
	        bi.fillStyle = "white";
			bi.fill();
			bi.beginPath();
			bi.arc(350, 250, 30,0,2*Math.PI);
		    
	        bi.fillStyle = "black";
			bi.fill();
			bi.beginPath();
			bi.arc(150, 250, 30,0,2*Math.PI);
		    
	        bi.fillStyle = "white";
			bi.fill();
			
			
			
			
			
			
			bi.beginPath();
			bi.arc(750, 250, 200,0.5*Math.PI,1.5*Math.PI);
		    
	        bi.fillStyle = "#000000";
			bi.fill();
			bi.beginPath();
			bi.arc(750, 250, 200,1.5*Math.PI,0.5*Math.PI);
		    
	        bi.fillStyle = "white";
			bi.fill();
			bi.beginPath();
			bi.arc(750, 150, 100,0,2*Math.PI);
		    bi.fillStyle = "white";
			bi.fill();
			bi.beginPath();
			bi.arc(750, 350, 100,0,2*Math.PI);
		    bi.fillStyle = "black";
			bi.fill();
			bi.beginPath();
			bi.arc(750, 150, 30,0,2*Math.PI);
		    bi.fillStyle = "black";
			bi.fill();
			bi.beginPath();
			bi.arc(750, 350, 30,0,2*Math.PI);
		    bi.fillStyle = "white";
			bi.fill();
			
			
			
			
			bi.beginPath();
			bi.arc(250, 750, 200,3/4*Math.PI,7/4*Math.PI);
		    bi.fillStyle = "#000000";
			bi.fill();
			
			
			bi.beginPath();
			bi.arc(250, 750, 200,7/4*Math.PI,3/4*Math.PI);
		    bi.fillStyle = "white";
			bi.fill();
			
			bi.beginPath();
			bi.arc(250-100/Math.sqrt(2),750+100/Math.sqrt(2),100,0,2*Math.PI);
		    bi.fillStyle = "white";
			bi.fill();
			
			bi.beginPath();
			bi.arc(250+100/Math.sqrt(2),750-100/Math.sqrt(2),100,0,2*Math.PI);
		    bi.fillStyle = "black";
			bi.fill();
			
			bi.beginPath();
			bi.arc(250+100/Math.sqrt(2),750-100/Math.sqrt(2),30,0,2*Math.PI);
		    bi.fillStyle = "white";
			bi.fill();
			
			bi.beginPath();
			bi.arc(250-100/Math.sqrt(2),750+100/Math.sqrt(2),30,0,2*Math.PI);
		    bi.fillStyle = "black";
			bi.fill();
			
			
			
			bi.beginPath();
			bi.arc(750, 750, 200,1/4*Math.PI,5/4*Math.PI);
		    bi.fillStyle = "black";
			bi.fill();
			
			
			bi.beginPath();
			bi.arc(750, 750, 200,5/4*Math.PI,1/4*Math.PI);
		    bi.fillStyle = "white";
			bi.fill();
			
			bi.beginPath();
			bi.arc(750-100/Math.sqrt(2),750-100/Math.sqrt(2),100,0,2*Math.PI);
		    bi.fillStyle = "white";
			bi.fill();
			
			bi.beginPath();
			bi.arc(750+100/Math.sqrt(2),750+100/Math.sqrt(2),100,0,2*Math.PI);
		    bi.fillStyle = "black";
			bi.fill();
			
			bi.beginPath();
			bi.arc(750-100/Math.sqrt(2),750-100/Math.sqrt(2),30,0,2*Math.PI);
		    bi.fillStyle = "black";
			bi.fill();
			
			bi.beginPath();
			bi.arc(750+100/Math.sqrt(2),750+100/Math.sqrt(2),30,0,2*Math.PI);
		    bi.fillStyle = "white";
			bi.fill();
			
			
			
			
			
			
		</script>
		
		
		
		
	</body>
</html>
